import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Pressable } from 'react-native';
import { Image } from 'expo-image';
import { Heart, Play, Bookmark } from 'lucide-react-native';
import { colors } from '@/constants/colors';
import { EnglishContent } from '@/types';

interface ContentListItemProps {
  content: EnglishContent;
  onPress: (content: EnglishContent) => void;
  onDoubleTap?: (content: EnglishContent) => void;
  isFavorite?: boolean;
  onToggleFavorite?: (contentId: string) => void;
}

export const ContentListItem: React.FC<ContentListItemProps> = ({
  content,
  onPress,
  onDoubleTap,
  isFavorite = false,
  onToggleFavorite,
}) => {
  let lastTap = 0;
  
  const handlePress = () => {
    const now = Date.now();
    const DOUBLE_PRESS_DELAY = 300;
    
    if (lastTap && (now - lastTap) < DOUBLE_PRESS_DELAY) {
      // Double tap detected
      if (onDoubleTap) {
        onDoubleTap(content);
      }
    } else {
      // Single tap
      onPress(content);
    }
    
    lastTap = now;
  };
  
  const getDifficultyColor = (difficulty: string) => {
    switch (difficulty) {
      case 'beginner':
        return colors.success;
      case 'intermediate':
        return colors.secondary;
      case 'advanced':
        return colors.accent;
      default:
        return colors.text.tertiary;
    }
  };
  
  return (
    <TouchableOpacity 
      style={styles.container}
      onPress={handlePress}
      activeOpacity={0.7}
    >
      <View style={styles.imageContainer}>
        {content.imageUrl ? (
          <Image
            source={{ uri: content.imageUrl }}
            style={styles.image}
            contentFit="cover"
            transition={200}
          />
        ) : (
          <View style={[styles.image, styles.placeholderImage]} />
        )}
        <View style={styles.typeTag}>
          <Text style={styles.typeText}>{content.type}</Text>
        </View>
      </View>
      
      <View style={styles.contentContainer}>
        <View style={styles.titleRow}>
          <Text style={styles.title} numberOfLines={1}>{content.title}</Text>
          {onToggleFavorite && (
            <Pressable 
              onPress={() => onToggleFavorite(content.id)}
              hitSlop={10}
            >
              <Heart 
                size={20} 
                color={isFavorite ? colors.accent : colors.text.tertiary}
                fill={isFavorite ? colors.accent : 'none'}
              />
            </Pressable>
          )}
        </View>
        
        <Text style={styles.english} numberOfLines={2}>{content.english}</Text>
        <Text style={styles.chinese} numberOfLines={1}>{content.chinese}</Text>
        
        <View style={styles.footer}>
          <View 
            style={[
              styles.difficultyTag, 
              { backgroundColor: getDifficultyColor(content.difficulty) + '20' }
            ]}
          >
            <Text 
              style={[
                styles.difficultyText, 
                { color: getDifficultyColor(content.difficulty) }
              ]}
            >
              {content.difficulty}
            </Text>
          </View>
          
          <View style={styles.iconContainer}>
            <Play size={16} color={colors.primary} />
            <Text style={styles.playText}>Double-tap to play</Text>
          </View>
        </View>
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    backgroundColor: colors.background,
    borderRadius: 12,
    marginBottom: 16,
    overflow: 'hidden',
    borderWidth: 1,
    borderColor: colors.border,
  },
  imageContainer: {
    width: 100,
    height: 120,
    position: 'relative',
  },
  image: {
    width: '100%',
    height: '100%',
  },
  placeholderImage: {
    backgroundColor: colors.card,
  },
  typeTag: {
    position: 'absolute',
    top: 8,
    left: 8,
    backgroundColor: 'rgba(0, 0, 0, 0.6)',
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 4,
  },
  typeText: {
    color: colors.text.inverse,
    fontSize: 10,
    fontWeight: '600',
    textTransform: 'uppercase',
  },
  contentContainer: {
    flex: 1,
    padding: 12,
    justifyContent: 'space-between',
  },
  titleRow: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: 4,
  },
  title: {
    fontSize: 16,
    fontWeight: '600',
    color: colors.text.primary,
    flex: 1,
    marginRight: 8,
  },
  english: {
    fontSize: 14,
    color: colors.text.primary,
    marginBottom: 4,
  },
  chinese: {
    fontSize: 14,
    color: colors.text.secondary,
    marginBottom: 8,
  },
  footer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  difficultyTag: {
    paddingHorizontal: 8,
    paddingVertical: 4,
    borderRadius: 4,
  },
  difficultyText: {
    fontSize: 10,
    fontWeight: '600',
  },
  iconContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 4,
  },
  playText: {
    fontSize: 10,
    color: colors.text.tertiary,
  },
});